<template>

  <div>
    <div>
      <el-row>
        <el-col :span="5">
          <el-input placeholder="请输入姓名/邮箱/手机号" size="small" v-model="keywords" clearable>
          </el-input>
        </el-col>
        <el-col :span="10">
          <el-button size="mini" style="margin-left: 10px;" type="primary" @click="searh">
            <i class="iconfont icon-search"></i> 查询
          </el-button>
          <el-button size="mini" type="success" @click="toadd">
            <i class="iconfont icon-add"></i> 添加
          </el-button>
          <el-button size="mini" type="danger" :disabled="ps">
            <i class="iconfont icon-delete"></i> 批量删除
          </el-button>
        </el-col>
        <el-col :span="9" style="display: flex;justify-content: flex-end;">
          <el-button-group>
            <el-tooltip class="item" effect="dark" content="刷新" placement="top">
              <el-button size="mini">
                <i class="iconfont icon-reload"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="导出excel" placement="top">
              <el-button size="mini" @click="exportusers">
                <i class="iconfont icon-Excel"></i>
              </el-button>
            </el-tooltip>
          </el-button-group>
        </el-col>
      </el-row>
      <el-table :data="users" size="mini" stripe style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="60" sortable>
        </el-table-column>
        <el-table-column prop="name" label="用户名" width="100">
        </el-table-column>
        <el-table-column prop="roles" label="角色" width="200">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="150">
        </el-table-column>
        <el-table-column prop="mobile" label="手机" width="100" sortable>
        </el-table-column>
        <el-table-column prop="deptname" label="所属部门" width="150">
        </el-table-column>
        <el-table-column prop="status" label="状态" :formatter="statusFormatter" width="60">
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="warning" size="mini">
              <i class="iconfont icon-edit"></i>编辑
            </el-button>
            <el-button type="danger" size="mini" @click="delete(scope.row)">
              <i class="iconfont icon-delete"></i> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 10px;" @size-change="pageSizeChange" @current-change="currentPageChange"
                     :current-page="page.cpage"
                     :page-sizes="[5, 10, 20, 30]" :page-size="page.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </div>

    <el-dialog :title="title" :visible.sync="editFormVisiable" :close-on-click-modal="false">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth +'px'">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth +'px'">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth +'px'">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth +'px'">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth +'px'">
          <el-select v-model="form.roleidsarr" multiple placeholder="请选择" style="width: 100%;">
            <el-option v-for="role in roles" :key="role.id" :label="role.remark" :value="role.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisiable = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="saveUser" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios"
  import qs from "qs"

  import {copy} from "../../js/mycommon.js"

  export default {
    data() {
      return {
        keywords: "",//查询关键字
        //分页参数
        page: {
          pageSize: 10,
          cpage: 1,
          total: 1
        },
        //所有用户
        users: [],
        //选中用户
        multipleSelection: [],
        ps: true,
        formLabelWidth: 100,
        editFormVisiable: false,
        title: "",
        form: {
          roleidsarr: []
        },
        roles: [] //所有的角色
      }
    },
    mounted() {
      this.pageQuery()
    },
    methods: {
      //导出到excel
      exportusers() {
        window.location.href = "/sys/user/export2";
      },
      //保存用户
      saveUser() {
        this.editFormVisiable = false;
        var that = this;
        var roleids = "";
        for (var i in this.form.roleidsarr) {
          roleids = roleids + "," + this.form.roleidsarr[i];
        }
        if (roleids)
          this.form.roleids = roleids.substring(1);
        var data = qs.stringify(this.form);
        console.log(data);
        axios.post("/sys/user", data).then(function (response) {
          var result = response.data.message;
          if (response.data.code == '200') {
            that.$notify({
              title: '成功',
              message: result,
              type: 'success'
            });
            that.pageQuery();
          } else {
            that.$notify.error({
              title: '错误',
              message: result
            });
          }
        })
      },
      //格式化状态
      statusFormatter(row, column) {
        return row.status == '1' ? "已启用" : "已禁用";
      },
      //搜索
      searh() {
        this.pageQuery();
      },
      //分页查询
      pageQuery() {
        var that = this;
        axios.get("/sys/user/list", {
          params: {
            pageSize: that.page.pageSize,
            pageNum: that.page.cpage,
            keywords: that.keywords
          }
        }).then(function (response) {
          that.users = response.data.rows;
          that.page.total = response.data.total;
        });
      },
      //编辑
      edit(row) {
        this.title = "编辑用户";
        this.editFormVisiable = true;
        this.getRoles();
        var ids = [];
        var idarray = row.roleids.split(",");
        if (idarray) {
          for (var i in idarray) {
            ids.push(idarray[i] * 1)
          }
          var data = copy(row);
          data.roleidsarr = ids;
          this.form = data;
        }
      },

      toadd() {
        this.title = "添加用户";
        this.editFormVisiable = true;
        this.getRoles();
        this.form = {
          roleidsarr: []
        }
      },

      getRoles() {
        if (this.roles.length == 0) {
          var that = this;
          axios.get("/sys/role/all").then(function (response) {
            that.roles = response.data;
          });
        }
      },
      //删除
      delete: function (row) {

      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
        if (this.multipleSelection.length > 0) {
          this.ps = false
        } else {
          this.ps = true
        }
      },

      /**
       * 改变页码
       */
      currentPageChange(cpage) {
        this.page.cpage = cpage;
        this.pageQuery()
      },
      /**
       * 每页显示条数改变
       */
      pageSizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.pageQuery();
      }

    }
  }
</script>

<style>

</style>
